.center-con{
  width:70%;
  min-width:980px;
}
/* header */
div.head{
  position:absolute;
  z-index:1010;
  height:58px;
  width:100%;
  background-color:#F8F8F8;
}
div.left-logo{
  position:absolute;
  left:35px;
  top:18px;
}
div.left-logo img.logo{
  width:164px;
  height:24px;
  vertical-align:middle;
}
div.left-logo span.brand{
  font-size:22px;
  color:#4F5356;
  line-height:24px;
  vertical-align:middle;
}
div.head-con{
  position:relative;
  height:70px;
  line-height:70px;
  vertical-align:middle;
  margin:0 50px;
  border-bottom:2px solid #e7e7e7;
}
.app-icon{
  display:inline-block;
  width:50px;
  height:50px;
  vertical-align:middle;
  text-align:center;
  border-radius:5px;
}
.app-icon i.icon{
  font-size:34px;
  color:#FFF;
  line-height:50px;
}
a.head-btn-l{
  position:absolute;
  bottom:18px;
  line-height:34px;
  left:70px;
  text-decoration:none;
  color:#403F44;
  vertical-align:bottom;
}
i.head-btn{
  font-size:22px;
  vertical-align:middle;
}
span.head-title{
  font-size:16px;
  vertical-align:middle;
}
ul.right-tool{
  position:absolute;
  right:20px;
  top:16px;
}
li.tool-item{
  position:relative;
  display:inline-block;
  margin-right:10px;
}
li.tool-item:active{
  opacity:0.6;
  filter:alpha(opacity=60);
}
li.tool-item i.icon{
  cursor:pointer;
  font-size:30px;
  color:#FF8000;
}
li.disabled i.icon{
  color:#B2B2B2 !important;
}
@media screen and (max-width:1200px){
  ul.right-tool{
	top:85px;
	right:0;
  }
  li.tool-item{
	display:block;
	width:36px;
	height:36px;
	border-radius:50%;
	margin-bottom:22px;
	background-color:#FF8000;
	text-align:center;
  }
  li.tool-item i.icon{
	color:#fff !important;
	line-height:36px;
  }
  li.disabled{
	background-color:#B2B2B2 !important;
  }
  ul.pop-list{
	top:45px;
  }
}
/* end of header */

/* picture con */
div.welcome{
  background-color:#F8F8F8;
  margin:0 50px;
  padding:10px;
  text-align:center;
}
i.router{
  display:inline-block;
  background:url(/luci-static/images/router_blue.png?_=20170809165512) no-repeat;
  width:292px;
  height:186px;
}
/* end of picture con */

/* list content */
.underline{
  border-bottom:1px solid #DDD;
}
ul.set-con{
  text-align:center;
  margin:20px 50px 10px;
}
div.set-con-middle{
  margin-right:50%;
  text-align:right;
}
label.desc-title{
  position:absolute;
  left:50px;
  font-size:16px;
  color:#4F5356;
}
div.switch-con{
  height:32px;
  border-bottom:2px solid #e7e7e7;
}
p.set-con-desc{
  width:300px;
  margin:0 auto;
  color:#4F5356;
  text-align:left;
}
label.tip-lbl{
  line-height:20px;
  font-size:14px;
}
span.state{
  line-height:20px;
  font-size:14px;
}
p.desc-tetail{
  font-size:14px;
  color:#4F5356;
  padding:12px 0;
  text-align:left;
  text-indent:2em;
}
span.switch{
  font-size:0;
  cursor:pointer;
  display:inline-block;
  margin-right:110px;
  width:40px;
  border-radius:20px;
  height:20px;
  line-height:20px;
  vertical-align:middle;
  background-color:#E8E8E8;
}
ul.set-con-switch span.switch{
  margin-right:0;
  float:right;
}
span.switch i.switch-circle{
  display:inline-block;
  width:16px;
  height:16px;
  margin:2px;
  border-radius:50%;
  vertical-align:middle;
  background-color:#FFF;
}
li.set-con-radio{
  width:300px;
  margin:0 auto;
  color:#4F5356;
  text-align:left;
  line-height:32px;
  white-space:nowrap;
}
label.radio-title{
  display:inline-block;
  width:100px;
  font-size:14px;
  line-height:32px;
  vertical-align:middle;
}
span.radio i{
  font-size:32px;
  line-height:32px;
}
span.radio-r{
  margin-left:20px;
}
span.radio label{
  font-size:14px;
  line-height:32px;
}
li.text-con{
  border:1px solid #DDD;
  border-radius:4px;
  width:300px;
  margin:auto;
}
li.text-con-focus{
  border-color:#FFBE62 !important;
}
li.text-con-focus label.desc-lbl{
  border-color:#FFBE62 !important;
}
li.text-con span.select{
  cursor:pointer;
  position:relative;
  width:170px;
  padding:0 14px;
  color:#4F5356;
  height:34px;
  line-height:34px;
  vertical-align:middle;
  font-size:14px;
}
i.tip-l{
  cursor:pointer;
  font-size:30px;
  vertical-align:middle;
}
span.desc-lbl{
  color:#4F5356;
  font-size:14px;
  vertical-align:middle;
}
ul.sel-opts-ul{
  top:-9999px;
  right:-1px;
  width:200px;
  font-size:14px;
  list-style:none;
  position:absolute;
  border:1px solid lightgrey;
  overflow:hidden;
  max-height:175px;
  _height:expression(this.offsetHeight<175?"":175);
  border-radius:3px;
  background:#FFFFFF;
  visibility:visible;
  z-index:1005;
}
ul.sel-opts-ul li.option{
  border-bottom:1px solid #DDD;
  height:34px;
  line-height:34px;
  font-size:14px;
  font-weight:normal;
  margin-left:0px;
  cursor:pointer;
  overflow:hidden;
  float:none;
  display:block;
  text-align:left;
}
li.option span{
  font-weight:normal;
  font-size:14px;
  padding:0px 10px;
  visibility:hidden;
}
span.select span.value{
  word-break:break-all;
  word-wrap:break-word;
  vertical-align:middle;
  display:inline-block;
  overflow:hidden;
  *display:inline;
  *zoom:1;
}
span.select span.sel-value{
  width:185px;
  line-height:34px;
  height:34px;
  text-align:left;
}
label.desc-lbl{
  display:inline-block;
  border-right:1px solid #DDD;
  text-align:center;
  vertical-align:middle;
  width:96px;
  line-height:28px;
  font-size:14px;
  color:#4F5356;
}
li.text-con input.text{
  border:0;
  width:170px;
  color:#4F5356;
  height:34px;
  line-height:34px;
  padding:0 14px;
  vertical-align:middle;
  font-size:14px;
}
li.text-con input.text-eye{
  width:156px;
  padding-right:28px;
}
i.tip{
  cursor:pointer;
  position:absolute;
  right:0;
  top:0;
  line-height:34px;
  vertical-align:middle;
  font-size:28px;
}
i.icon-eye{
  right:5px !important;
}
div.btn-con{
  margin:10px 50px;
}
input.btn{
  cursor:pointer;
  width:300px;
  height:34px;
  line-height:34px;
  vertical-align:middle;
  font-size:14px;
  border-radius:4px;
  margin-top:30px;
  margin-bottom:20px;
}
input.btn-left{
  width:15%;
}
input.btn-right{
  width:15%;
  margin-left:20px;
}
/* end of list content */

/*error note div*/
div.err-note{
  width:300px;
  margin:10px auto;
}
i.err-icon{
  margin-right:2px;
  line-height:19px;
  font-size:24px;
}
p.note-str{
  width:274px;
  font-size:14px;
  word-break:break-all;
}
/*end of error note div*/
/* help */
#Help{
  position:fixed;
  top:0;
  bottom:0;
  right:-30%;
  width:30%;
  background-color:#4C4C4C;
  opacity:0.99;
  filter:alpha(opacity=99);
  z-index:1020;
  -moz-transition:right 0.25s ease;
  -webkit-transition:right 0.25s ease;
  transition:right 0.25s ease;
}
.help-show{
  right:0 !important;
}
div.help-back{
  position:absolute;
  left:0;
  display:inline-block;
  height:100%;
}
div.help-back i.help-back{
  cursor:pointer;
  margin-left:5px;
  color:#9A9A9A;
  font-size:30px;
  vertical-align:middle;
}
div.help-back i.help-back:active{
  opacity:0.6;
  filter:alpha(opacity=60);
}
div.help-info{
  width:100%;
  height:100%;
  display:inline-block;
}
li.help-head{
  margin-top:60px;
}
div.help-icon{
  display:inline-block;
  width:60px;
  height:60px;
  vertical-align:middle;
  text-align:center;
  border-radius:8px;
}
i.head-icon{
  font-size:40px;
  color:#FFF;
  line-height:60px;
}
span.help-title{
  color:#FFF;
  font-size:18px;
  margin-left:20px;
  vertical-align:bottom;
}
ul.help-content{
  width:75%;
  margin:0 auto 40px;
}
ul.help-content li.title{
  color:#FFF;
  font-size:16px;
  margin:40px 0 25px;
}
ul.help-content li.summary{
  color:#BEBEBE;
  font-size:14px;
  margin:40px 0 25px;
  text-align:left;
}
ul.help-content li.content{
  color:#BEBEBE;
  font-size:14px;
  text-align:left;
}
ul.help-content li.content a{
  color:#BEBEBE;
}
/* end of help */
/* pop content */
div.pop-widget{
  display:none;
  height:100%;
  width:100%;
  position:fixed;
  bottom:0;
  _position:absolute;
  _bottom:0px;
  z-index:1100;
}
#Pop{
  z-index:2000;
}
/* end of pop content */
/* loding */
div.loading{
  overflow:hidden;
  width:280px;
  border-radius:3px;
  min-height:150px;
  background-color:#FFF;
  margin:230px auto;
}
div.outer-circle{
  width:52px;
  height:52px;
  margin:25px auto;
  background-image:url(/luci-static/images/loading.gif?_=20170809165512);
  background-repeat:no-repeat;
}
div.inside-circle{
  display:none;
}
p.loading-tip{
  font-size:14px;
  text-align:center;
  color:#4F5356;
  margin:0 1em 20px;
}
/* end of loding */
/* alert */
div.alert{
  overflow:hidden;
  width:300px;
  border-radius:5px;
  background-color:#FFF;
  margin:240px auto;
}
div.progress-bar-con{
  width:360px;
}
p.alert-title{
  font-size:16px;
  text-align:center;
  color:#4F5356;
  line-height:50px;
  height:50px;
  background-color:#F8F8F8;
  border-bottom:1px solid #DCDCDC;
}
p.alert-tip{
  font-size:14px;
  line-height:24px;
  padding:20px 12px;
  text-align:center;
  color:#4F5356;
}
p.progress-title{
  border-bottom:0px solid #DCDCDC;
}
p.progress-bar-tip{
  font-size:15px;
  width:300px;
  margin:20px auto 30px;
  color:#F13F3F;
  text-align:center;
}
div.progress-bar{
  width:300px;
  font-size:14px;
  color:#FF7708;
  margin:10px auto;
}
p.percent{
  width:0px;
  text-align:right;
}
label.percent{
  position:relative;
  font-size:14px;
}
i.icon_position{
  position:relative;
  display:inline-block;
  font-size:20px;
}
div.bar{
  height:2px;
  margin:auto;
  background-color:#DDD;
}
div.bar p.progress{
  height:2px;
  background-color:#FF7708;
}
div.alert-btn-con{
  font-size:0;
  text-align:center;
  margin:0;
}
input.alert-btn{
  cursor:pointer;
  width:275px;
  line-height:36px;
  background-color:#F8F8F8;
  color:#FD9017;
  font-size:16px;
  margin:2px 0 12px;
  border:1px solid #DDD;
  border-radius:3px;
}
input.confirm-btn{
  cursor:pointer;
  width:125px;
  line-height:36px;
  background-color:#F8F8F8;
  font-size:16px;
  margin:2px 10px 12px;
  border:1px solid #DDD;
  border-radius:3px;
}
input.confirm-btn-l{
  color:#4F5356;
}
input.confirm-btn-r{
  color:#FD9017;
}
/* end of alert */
/* guide */
.center-container{
  font-size:0;
}
.vertical-center{
  display:inline-block;
  vertical-align:middle;
  margin:auto;
}
.center-container:after{
  content:'';
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
i.guide-icon{
  position:absolute;
  right:14px;
  top:14px;
  cursor:pointer;
  font-size:30px;
  color:#FF8000;
}
div.guide{
  position:absolute;
  top:58px;
  bottom:210px;
  width:100%;
  font-size:0;
  text-align:center;
}
div.left-image-con{
  float:left;
  width:50%;
  height:100%;
  background-color:#F0F0F0;
  text-align:right;
}
div.left-image-con div.image-con{
  margin:10px 50px;
}
div.image-con img.left-image{
  height:280px;
  width:300px;
}
div.right-set-con{
  float:right;
  width:50%;
  height:100%;
  text-align:left;
}
div.right-set-con ul.set-con{
  position:relative;
  text-align:left;
}
div.right-set-con div.switch-con{
  position:relative;
}
h1.guide-title{
  font-size:30px;
  color:#4F5366;
  margin-bottom:20px;
  text-align:right;
}
div.right-set-con div.err-note{
  margin-left:50px;
}
div.guide-btn-con{
  width:300px;
  text-align:right;
  margin-left:50px;
}
input.guide-btn{
  width:140px;
  background-color:#FF7800;
}
input.guide-btn-right{
  margin-left:20px;
  background-color:#5DBD38;
}
/* end of guide */
